<template>
  <div class="app-container">
    <div class="tabs-container">
      <div class="left-tabs">
        <el-tabs class="name-show" type="border-card">
          <el-tab-pane label="申请入党">
            <template #label>
              <span >申请入党</span>
            </template>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer;">1.1入党申请书模版.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer;">1.2入党申请书撰写说明.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer;">2.1同入党申请人的谈话模版1.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer;">2.2同入党申请人的谈话模版2.doc</a>
            <br>
          </el-tab-pane>
          <el-tab-pane label="入党积极分子培训">
            <template #label>
              <span>入党积极分子培训</span>
            </template>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.1入党积极分子人选推荐表--党员推荐（35岁以上使用此表）.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.2.1团组织推荐入党积极分子审核表（28岁及以下团员使用此表）.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.2.2团组织推荐入党积极分子鉴定意见表（29-35岁青年使用此表）.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.3.1党外群众意见座谈会记录-记录人填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.3.2党员意见座谈会记录-记录人填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.4关于确定为入党积极分子的公示参考格式-党支部填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.5关于吸收XXX为入党积极分子的公示结果.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.6入党积极分子票决制票样参考格式.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.7关于吸收xxx为入党积极分子的决议-党支部一填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">3.8入党申请人基本情况模版--支委会填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1关于将xxx同志进行入党积极分子备案的报告.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5培养联系人资格审查表-党支部填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">6.1认真填写入党积极分子培养考察登记表（空文档）.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">6.2每季度思想汇报撰写要求.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">6.3入党积极分子培训登记表.xlsx</a>
            <br>
          </el-tab-pane>
          <el-tab-pane label="发展对象的确定和考察">
            <template #label>
              <span>发展对象的确定和考察</span>
            </template>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.1培养联系人意见.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.2党小组意见.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.3.1团组织推荐党员发展对象审核表（28岁及以下团员还需使用此表）.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.3.2团组织推荐党员发展对象鉴定意见表（29-35岁青年征求所在团组织意见需使用此表）.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.4.1党外群众意见座谈会记录-记录人填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.4.2党员意见座谈会记录-记录人填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.5拟定XXX同志为发展对象的公示参考-党支部使用.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.6关于拟定XXX为发展对象的公示结果说明.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.7关于将xxx同志确定为发展对象人选的决议-党支部填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">7.8确定发展对象表决票参考样式.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">8.1关于将xxx同志进行发展对象备案的报告.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">9.1入党介绍人资格审查-党支部填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.1自传--个人填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.2自传的填写说明.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.3外调证明提纲--请至机关党委取政审材料.docx</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.4XXX同志之XXX的证明材料参考.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.5关于XXX同志政治审查情况的报告--党支部填写.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">10.6政治审查材料－审查人填写.docx</a>
            <br>
          </el-tab-pane>
          <el-tab-pane label="预备党员的接收">
            <template #label>
              <span>预备党员的接收</span>
            </template>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.2接收预备党员公示.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.3预备党员转正公示和征求意见情况登记表（模板）.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.4同发展对象谈话.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.5入党介绍人意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.6接收预备党员党小组意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.1.7接收预备党员支委会意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.2.1预审请示.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.2.2党委预审结果.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.3.1接收预备党员支部党员大会决议.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.4.1按期转正支部党员大会决议.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">4.4.3（中心党委向党委组织部）接收预备党员备案报告.doc</a>
          </el-tab-pane>
          <el-tab-pane label="预备党员的教育、考察和转正">
            <template #label>
              <span>预备党员的教育、考察和转正</span>
            </template>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.1.1入党宣誓.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.1转正申请.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.2同预备期满党员谈话.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.3预备党员联系人转正意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.4预备党员转正党小组意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.5预备党员转正公示.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.6广泛征求党员和群众对预备党员转正的意见.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.7预备党员转正公示和征求意见情况登记表.doc</a>
            <br>
            <a @click="handleDownload" style="color:#1E90FF;cursor:pointer">5.3.8预备党员按期转正支委会意见.doc</a>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
      data() {
        return {
          httpUrl : process.env.VUE_APP_BASE_API
        }
      },
      methods: {
        handleDownload(event) {
          // event.preventDefault(); // 阻止默认的链接点击行为
          const fileName = event.target.textContent;
          var url = this.httpUrl + "/profile/upload/template/" + fileName;
          console.log(fileName)
          console.log(url)
          var suffix = url.substring(url.lastIndexOf("."), url.length);

          function downloadFile(url, fileName) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.addEventListener('load', function () {
              if (xhr.status === 200) {
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(xhr.response);
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(a.href);
              }
            });
            xhr.addEventListener('progress', function (e) {
              let percent = Math.trunc(e.loaded / e.total * 100);
            })
            // 错误处理
            xhr.addEventListener('error', function (e) {
              // todo
            })
            // 发送请求
            xhr.send();
          }
          downloadFile(url, fileName);
        },
      }
    }
</script>

<style scoped>
  .tabs-container{
    display: flex;
    height: 100vh;
  }
  .left-tabs{
    flex:0 0 100%;
    display: flex;
    overflow: auto;
    height: 80%;
    flex-direction: column;
  }
  .name-show{
    flex:1;
    margin-top: 10px;
  }

  .shortcut-icon span {
    font-size: 1.2em;
  }

</style>
